<template>
<div >
  <home-header  > </home-header>
  <home-swiper :list="swiperList"></home-swiper>
  <home-icons :list="iconList"></home-icons>
  <home-recommend :list="recommendList"></home-recommend>
  <home-weekend :list="weekendList"></home-weekend>
 </div>
 
</template> 

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'
import HomeHeader from '@/views/home/components/Header.vue'
import HomeSwiper from '@/views/home/components/Swiper.vue'
import HomeIcons from '@/views/home/components/icons.vue'
import HomeRecommend from '@/views/home/components/Recommend.vue'
import HomeWeekend from '@/views/home/components/Weekend.vue'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
  name: 'Home',
  components:{
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data(){
    return{
      lastCity: '',
      swiperList: [],
      iconList:[],
      recommendList:[],
      weekendList:[],
    }
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHomeInfo(){
      //上线前 '/api/index.json'
      axios.get('/mock/index.json?city='+ this.city )
      .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){ 
      res=res.data;
      if(res.ret&& res.data){
        const data= res.data;
        this.swiperList=data.swiperList
        this.iconList=data.iconList
        this.recommendList=data.recommendList
        this.weekendList=data.weekendList
      }
    }
  },
   mounted (){
     this.lastCity= this.city
    this.getHomeInfo()
  },
  activated (){
    if ( this.lastCity !== this.city){
      this.lastCity = this.city
      this.getHomeInfo()
    }
  },

}
</script>

<style>

</style>

